let $ = layui.jquery;
//利用默认导出的类写法
export default class AddMovie {

  constructor() {
    this.render();
    this.handle();
  }
  render() {
    let template = `<form class="layui-form" action="" method="post" >
    <div class="layui-form-item">
      <label class="layui-form-label">电影名</label>
      <div class="layui-input-block">
        <input type="text" name="name" required  lay-verify="required" placeholder="请输入电影名" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">电影英文名</label>
      <div class="layui-input-block">
        <input type="text" name="ename" required  lay-verify="required" placeholder="请输入电影英文名" autocomplete="off" class="layui-input">
      </div>
    </div>
  
    <div class="layui-form-item">
      <label class="layui-form-label">电影类型</label>
      <div class="layui-input-block">
        <input type="radio" name="type" value="动作" title="动作" checked>
        <input type="radio" name="type" value="冒险" title="冒险">
        <input type="radio" name="type" value="科幻" title="科幻">
        <input type="radio" name="type" value="犯罪" title="犯罪">
        <input type="radio" name="type" value="动画" title="动画">
        <input type="radio" name="type" value="爱情" title="爱情">
        <input type="radio" name="type" value="悬疑" title="悬疑">
      </div>
    </div>

    <div class="layui-form-item">
    <label class="layui-form-label">电影上映地区</label>
    <div class="layui-input-block">
      <input type="radio" name="area" value="中国" title="中国" checked>
      <input type="radio" name="area" value="日本" title="日本">
      <input type="radio" name="area" value="韩国" title="韩国">
      <input type="radio" name="area" value="美国" title="美国">
      <input type="radio" name="area" value="欧洲" title="欧洲">
      <input type="radio" name="area value="印度" title="印度">
      <input type="radio" name="area" value="泰国" title="泰国">
    </div>
  </div>

  <div class="layui-form-item">
  <label class="layui-form-label">电影时长</label>
    <div class="layui-input-block">
      <input type="text" name="time" required  lay-verify="required" placeholder="请输入电影时长" autocomplete="off" class="layui-input">
    </div>
  </div>

<div class="layui-form-item">
  <label class="layui-form-label">电影上映时间</label>
  <div class="layui-input-block">
    <input type="text" name="upDate" required  lay-verify="required" placeholder="请输入电影上映时间" autocomplete="off" class="layui-input">
  </div>
</div>

<div class="layui-form-item">
  <label class="layui-form-label">电影评分</label>
  <div class="layui-input-block">
    <input type="text" name="score" required  lay-verify="required" placeholder="请输入电影评分" autocomplete="off" class="layui-input">
  </div>
</div>


<div class="layui-form-item">
<label class="layui-form-label">电影票房</label>
<div class="layui-input-block">
  <input type="text" name="count" required  lay-verify="required" placeholder="请输入电影票房" autocomplete="off" class="layui-input">
</div>
</div>


<div class="layui-form-item">
  <label class="layui-form-label">剧情简介</label>
  <div class="layui-input-block">
    <input type="text" name="intro" required  lay-verify="required" placeholder="请输入电影简介" autocomplete="off" class="layui-input">
  </div>
</div>


<div class="layui-form-item">
    <label class="layui-form-label">首页图片</label>
    <div class="layui-input-inline ">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="indexImage">
                <p id="uploadError"></p>
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>
        <a name="list-progress"> </a>
        <div style="margin-top: 10px;">
        </div>
    </div>
</div>

<div class="layui-form-item">
  <label class="layui-form-label">导演名</label>
  <div class="layui-input-block">
    <input type="text" name="directorName" required  lay-verify="required" placeholder="请输入导演名" autocomplete="off" class="layui-input">
  </div>
</div>



<div class="layui-form-item">
  <label class="layui-form-label">演员名</label>
  <div class="layui-input-block">
    <input type="text" name="actorName" required  lay-verify="required" placeholder="请输入演员名" autocomplete="off" class="layui-input">
  </div>
</div>


<div class="layui-form-item">
    <label class="layui-form-label">图集</label>
    <div class="layui-input-inline ">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="uploadImage">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="images">
                <p id="uploadError"></p>
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>
        <a name="list-progress"> </a>
        <div style="margin-top: 10px;">
        </div>
    </div>
</div>




  </form>
  `
    $("#addMovieTemplate").html(template);
  }


  handle() {
    let form = layui.form;
    let layer = layui.layer;
    let table = layui.table;
    var upload = layui.upload;
    var element = layui.element;

    // 首页上传函数方法
    function uploadMethod() {
      var uploadInst = upload.render({
        elem: '#uploadBtn'
        , url: '/api/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        , before: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {
            $('#indexImage').attr('src', result); //首页图片链接（base64）

          });
          element.progress('demo', '0%'); //进度条复位
          layer.msg('上传中', { icon: 16, time: 0 });
        }
        , done: function (res) {
          console.log(res);
          //如果上传失败
          if (res.code > 0) {
            return layer.msg('上传失败');
          }
          //上传成功的一些操作
          //……
          $('#indexImage').attr('src', "http://127.0.0.1:3001/images/" + res.data);



          $('#uploadError').html(''); //置空上传失败的状态
        }
        , error: function () {
          //演示失败状态，并实现重传
          var uploadError = $('#uploadError');
          uploadError.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</ a>');
          uploadError.find('.demo-reload').on('click', function () {
            uploadInst.upload();
          });
        }
        //进度条
        , progress: function (n, elem, e) {
          element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
          if (n == 100) {
            layer.msg('上传完毕', { icon: 1 });
          }
        }
      });
    }

    // 图集上传方法
    function uploadImage() {
      var uploadInst = upload.render({
        elem: '#uploadImage'
        , url: '/api/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        , before: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {

            $('#images').attr('src', result); //图集
          });
          element.progress('demo', '0%'); //进度条复位
          layer.msg('上传中', { icon: 16, time: 0 });
        }
        , done: function (res) {
          console.log(res);
          //如果上传失败
          if (res.code > 0) {
            return layer.msg('上传失败');
          }
          //上传成功的一些操作
          //……

          $('#images').attr('src', "http://127.0.0.1:3001/images/" + res.data);

          $('#uploadError').html(''); //置空上传失败的状态
        }
        , error: function () {
          //演示失败状态，并实现重传
          var uploadError = $('#uploadError');
          uploadError.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</ a>');
          uploadError.find('.demo-reload').on('click', function () {
            uploadInst.upload();
          });
        }
        //进度条
        , progress: function (n, elem, e) {
          element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
          if (n == 100) {
            layer.msg('上传完毕', { icon: 1 });
          }
        }
      });
    }


    layer.open({
      type: 1,
      area: ["650px", "600px"],
      content: $("#addMovieTemplate").html(),
      btn: ["添加", "取消"],

      success: function (layero, index) {
        // 调用方法
        form.render();
        uploadMethod();
        uploadImage();


 

      },
      yes: function () {


        // 最后一张图片上传有问题
        let name = $("input[name='name']").val();
        let ename = $("input[name='ename']").val();
        let type = $("input[name='type']:checked").val();
        let area = $("input[name='area']:checked").val();
        let time = $("input[name='time']").val();
        let upDate = $("input[name='upDate']").val();
        let score = $("input[name='score']").val();
        let count = $("input[name='count']").val();
        let intro = $("input[name='intro']").val();
        let indexImage = $('#indexImage').attr('src');
        console.log(indexImage);

        let directorName = $("input[name='directorName']").val();
        let actorName = $("input[name='actorName']").val();
        let images = $('#images').attr('src');
        console.log(images);

        // ajax post提交  添加数据
        $.ajax({

          type: "post",
          data: {
            name,
            ename,
            type,
            area,
            time,
            upDate,
            score,
            count,
            intro,
            indexImage,
            directorName,
            actorName,
            images,


          },
          url: "/api/addMovie",
          success: function (res) {
            console.log(res);
            if (res.code === 200) {

              layer.closeAll();
              table.reload("myTable", {});
              layer.msg("添加成功");



            } else {
              layer.msg("添加失败");
            }
          }
        })

      }

    });

  }

}